<script setup>
import { ref, onMounted, computed } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';
import MarketIndexCard from './market/MarketIndexCard.vue';
import MarketSectorCard from './market/MarketSectorCard.vue';

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

const marketTrend = ref('上涨');
const marketSentiment = ref('乐观');
const pieChartOption = ref({});

const marketIndexes = ref([
  { name: '上证指数', code: '000001', price: 3397.36, change: 1.2, turnover: 3562.8 },
  { name: '深证成指', code: '399001', price: 13793.21, change: 0.8, turnover: 4231.5 },
  { name: '创业板指', code: '399006', price: 2898.76, change: -0.5, turnover: 1876.3 },
  { name: '科创50', code: '000688', price: 1286.45, change: 2.3, turnover: 562.7 }
]);

const marketSectors = ref([
  { name: '科技', change: 1.8, leaders: [{name: '华为', change: 2.5}, {name: '小米', change: 1.2}, {name: 'OPPO', change: -0.8}], volume: 1256.3 },
  { name: '金融', change: 0.5, leaders: [{name: '工商银行', change: 0.7}, {name: '平安保险', change: 1.1}, {name: '招商银行', change: -0.3}], volume: 986.5 },
  { name: '医疗', change: 2.1, leaders: [{name: '恒瑞医药', change: 3.2}, {name: '迈瑞医疗', change: 1.8}, {name: '复星医药', change: 1.5}], volume: 754.2 },
  { name: '消费', change: -0.3, leaders: [{name: '贵州茅台', change: -0.5}, {name: '五粮液', change: 0.2}, {name: '伊利股份', change: -0.8}], volume: 632.8 }
]);

const topGainers = computed(() => {
  return [...marketSectors.value].sort((a, b) => b.change - a.change).slice(0, 3);
});

const topLosers = computed(() => {
  return [...marketSectors.value].sort((a, b) => a.change - b.change).slice(0, 3);
});

onMounted(() => {
  generateSectorData();
});

function generateSectorData() {
  pieChartOption.value = {
    title: {
      text: '板块涨跌分布',
      left: 'center',
      top: 0,
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      top: 'center'
    },
    series: [
      {
        name: '板块分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '12',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: marketSectors.value.map(sector => ({
          value: Math.abs(sector.change),
          name: sector.name,
          itemStyle: { color: sector.change >= 0 ? '#ff6b6b' : '#4ecdc4' }
        }))
      }
    ]
  };
}
</script>

<template>
  <div class="market-overview h-full flex flex-col space-y-4 p-4 bg-gray-50 rounded-lg">
    <div class="grid grid-cols-2 gap-4">
      <div class="bg-white p-4 rounded-lg shadow">
        <h3 class="text-lg font-semibold mb-2">市场整体趋势</h3>
        <p class="text-2xl font-bold" :class="marketTrend === '上涨' ? 'text-red-600' : 'text-green-600'">
          {{ marketTrend }}
        </p>
      </div>
      <div class="bg-white p-4 rounded-lg shadow">
        <h3 class="text-lg font-semibold mb-2">市场情绪</h3>
        <p class="text-2xl font-bold text-blue-600">{{ marketSentiment }}</p>
      </div>
    </div>
    
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <MarketIndexCard v-for="index in marketIndexes" :key="index.code" :index="index" />
    </div>
    
    <div class="flex space-x-4">
      <div class="w-1/2">
        <h3 class="text-lg font-semibold mb-2">领涨板块</h3>
        <div class="space-y-2">
          <MarketSectorCard v-for="sector in topGainers" :key="sector.name" :sector="sector" />
        </div>
      </div>
      <div class="w-1/2">
        <h3 class="text-lg font-semibold mb-2">领跌板块</h3>
        <div class="space-y-2">
          <MarketSectorCard v-for="sector in topLosers" :key="sector.name" :sector="sector" />
        </div>
      </div>
    </div>
    
    <div class="flex-grow">
      <v-chart class="w-full h-full" :option="pieChartOption" autoresize />
    </div>
  </div>
</template>

<style scoped>
.market-overview {
  overflow-y: auto;
}

/* 自定义滚动条样式 */
.market-overview::-webkit-scrollbar {
  width: 6px;
}

.market-overview::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.market-overview::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.market-overview::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>